<template>
  <div class="app-container">
    <el-form :show-message="!($route.query.isInfo || isInfo)" ref="elForm" :disabled="$route.query.isInfo || isInfo"
      :model="formData" :rules="rules" size="medium" label-width="130px">
      <h2 style="text-align: center">消耗品目录</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入名称" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="编号" prop="code">
            <el-input v-model="formData.code" placeholder="请输入编号" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="类别" prop="categoryValue">
            <el-select v-model="formData.categoryValue" placeholder="请选择类别" clearable :style="{ width: '100%' }">
              <el-option v-for="(item, index) in dict.type.goods_directory_category" v-show="index != 0" :key="index"
                :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="管控等级" prop="levelValue">
            <el-select v-model="formData.levelValue" placeholder="请选择管控等级" clearable :style="{ width: '100%' }">
              <el-option v-for="(item, index) in dict.type.goods_directory_level" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="技术要求" prop="techInfo">
            <el-input v-model="formData.techInfo" placeholder="请输入技术要求" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="技术指标" prop="tecTarget">
            <el-input
              v-model="formData.tecTarget"
              placeholder="请输入技术指标"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="规格" prop="spec">
            <el-input v-model="formData.spec" placeholder="请输入规格" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="主要用途" prop="useInfo">
            <el-input v-model="formData.useInfo" placeholder="请输入主要用途" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <h4 class="form-header h4" style="margin-top: 20px">附件信息</h4>
      <el-form-item label="" prop="file">
        <FileUpload :isDelete="!$route.query.isInfo" v-model="formData.file"></FileUpload>
      </el-form-item>

      <el-col :span="24" v-if="btnShow">
        <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
          <el-button v-if="!($route.query.isInfo || isInfo)" type="primary" @click="submitForm">提交</el-button>
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import {
  goodsDirectoryAdd,
  updateggoodsDirectory,
  goodsDirectoryInfo,
} from "@/api/quality/goods/directory.js";
export default {
  components: {},

  dicts: ["goods_directory_category", "goods_directory_level"],

  props: {
    isInfo: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
    btnShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      carSelectList: [],
      formData: {
        name: undefined,
        code: undefined,
        categoryValue: undefined,
        levelValue: undefined,
        // tecTarget: undefined,
        spec: undefined,
        useInfo: undefined,
        techInfo: undefined,
        file: "",
      },
      rules: {
        file: [
          {
            required: false,
            message: "请上传附件",
            trigger: "change",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: false,
            message: "请输入编号",
            trigger: "blur",
          },
        ],
        categoryValue: [
          {
            required: false,
            message: "请选择类别",
            trigger: "change",
          },
        ],
        levelValue: [
          {
            required: false,
            message: "请选择管控等级",
            trigger: "change",
          },
        ],
        // tecTarget: [
        //   {
        //     required: true,
        //     message: "请输入技术指标",
        //     trigger: "blur",
        //   },
        // ],

        spec: [
          {
            required: false,
            message: "请输入规格",
            trigger: "blur",
          },
        ],
        useInfo: [
          {
            required: false,
            message: "请输入主要用途",
            trigger: "blur",
          },
        ],
        techInfo: [
          {
            required: false,
            message: "请输入技术要求",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {},
  created() {
    if (this.$route.query.isEdit || this.$route.query.isInfo || this.isInfo) {
      this.getinfo();
    }
  },
  mounted() { },
  methods: {
    getinfo() {
      goodsDirectoryInfo(this.$route.query.id || this.id).then((response) => {
        this.formData = response.data;
      });
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          let query = JSON.parse(JSON.stringify(this.formData));
          if (query.categoryValue) {
            query.categoryLabel = this.dict.type.goods_directory_category.find(
              (e) => e.value === query.categoryValue
            ).label;
          }
          if (query.levelValue) {
            query.levelLabel = this.dict.type.goods_directory_level.find(
              (e) => e.value === query.levelValue
            ).label;
          }

          if (this.formData.chemistryGoodsDirectoryId != undefined) {
            updateggoodsDirectory(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            goodsDirectoryAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      this.$tab.closeOpenPage();
    },
  },
};
</script>
<style scoped>
.upload-file-uploader {
  margin-bottom: 5px;
}

.upload-file-list .el-upload-list__item {
  border: 1px solid #e4e7ed;
  line-height: 2;
  margin-bottom: 10px;
  position: relative;
}

.upload-file-list .ele-upload-list__item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
}

.ele-upload-list__item-content-action .el-link {
  margin-right: 10px;
}
</style>
